<!DOCTYPE html><html><head><title>浏览器渲染流程：DOM回流和重绘</title><meta charset='utf-8'><link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    

<h3 id="浏览器渲染流程dom回流和重绘">浏览器渲染流程：DOM回流和重绘</h3>

<h4 id="dom树cssom树渲染树">DOM树、CSSOM树、渲染树</h4>

<p><strong>DOM树</strong></p>

<ul><li><p>转换</p></li>
<li><p>令牌</p></li>
<li><p>词法分析</p></li>
<li><p>DOM构建</p></li>
</ul>

<p><img longdesc="./1585336855615.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p><strong>CSSOM树</strong></p>



<p><img longdesc="./1585337042226.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p><strong>Render-Tree渲染树</strong></p>



<p><img longdesc="./1585337215382.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p><strong>总结步骤：</strong></p>

<ul><li><p>处理 HTML 标记，构建 DOM 树</p></li>
<li><p>处理 CSS 标记，构建 CSSOM 树</p></li>
<li><p>将 DOM 树和 CSSOM 树融合成渲染树</p></li>
<li><p>根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流 =&gt; <strong>布局（Layout）或 重排（reflow）</strong></p></li>
<li><p>根据渲染树以及回流得到的几何信息，得到节点的绝对像素 =&gt; <strong>绘制（painting）或栅格化（rasterizing）</strong></p></li>
</ul>



<p><img longdesc="./1585337542544.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p><strong>优化方案</strong></p>

<ul><li><p>标签语义化和避免深层次嵌套</p></li>
<li><p>CSS选择器渲染是从右到左</p></li>
<li><p>尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制）</p>

<ul>
<li><p><code>style</code></p></li>
<li><p><code>link</code></p></li>
<li><p><code>@import</code></p></li>
<li><p>放到顶部</p></li></ul></li>
<li><p>避免阻塞的JS加载</p>

<ul>
<li><p>放到底部</p></li></ul></li>
</ul>



<p><img longdesc="./1585338597680.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<ul><li><p>减少DOM的回流和重绘</p></li>
</ul>



<p><img longdesc="./1585338377430.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./1585338397888.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./1585338409568.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./1585338422080.png" alt="Alt text" title="" type="image/png" src="" class=""></p></div></body></html>